var $position; //.slideUl当前距离左边的位置
var $original; //.slideUl距离左边的原始位置
//var $T=$("#_1").text();
var $firstChild;
var $slideUl;
var whichImg = 1; //表示当前显示第几张图片。
var unitWidth = 660; //照片的单位长度。
var isAuto = true; //是否自动轮播图片
var numberOfPhoto;

$(function() { //程序从此处开始执行

	numberOfPhoto = $(".Cgraverobber-slide-ul li").length; //照片总数
	$(".Cgraverobber-slide-ul").css({
		width: unitWidth * (numberOfPhoto+1) + "px"
	});
	
	var dots = $("<div class='Cgraverobber-slide-dot'></div>")
	$(".Cgraverobber-slide-div").append(dots);
	
	for(var i = 0; i < numberOfPhoto; i++){
		var className = "mark-img" + (i + 1);
		dots.append($("<div class='" + className + "'></div>"));
	}
	
	$(".mark-img1").css("opacity", "1"); //标记第一张照片的小圆点，此处为特殊处理，之后循环处理

	$slideUl = $(".Cgraverobber-slide-ul"); //获得需要移动的ul
	$position = $(".Cgraverobber-slide-ul").offset().left; //获得ul距离左边的位置，单位为px;
	$position -= $position;
	$original = $position; //记录原始位置	

	var $firstChild = $(".Cgraverobber-slide-ul").children("li:eq(0)").clone(); //克隆第一个li
	$slideUl.append($firstChild); //将克隆的li追加到slideUl的最后

	//为小圆点添加mouseenter事件。
	$(".Cgraverobber-slide-dot div").mouseenter(function() { //@why 为什么事件不支持函数调用？

		var indexOfClass = parseInt($(this).attr('class').replace(/[^0-9]/ig, "")) - 1;

		isAuto = false;
		$slideUl.animate({
			left: ($original - unitWidth * indexOfClass) + "px"
		}, 500);
		$position = $original - unitWidth * indexOfClass;
		whichImg = indexOfClass + 1;
		mark();
	});

	$(".Cgraverobber-slide-dot div").mouseleave(function() {
		isAuto = true;
	});

	setInterval(slide, 15000); //每隔3s调用一次slide()方法。
	//	alert($T);//@knowledge 经测试，选择器在function()之外不可用。
});

function slide() {
	if (isAuto) {

		if (whichImg == 1) { //如果是最后一张照片，则在0s的时间内，ul回到原始位置。如果是第一张照片，此操作多余。
			$slideUl.animate({
				left: ($original) + "px"
			}, 0);
		}

		$slideUl.animate({ //在当前位置的基础上向左移动一个单位长度
			left: ($position - unitWidth) + "px"
		}, 500);
		$position -= unitWidth; //更新当前位置。

		whichImg++;
		if (whichImg == numberOfPhoto + 1) { //如果此时显示最后一张（+1）照片，则下次显示第一张照片，ul为原始位置。
			whichImg = 1;
			$position = $original;
		}

		mark() //标记小圆点的颜色	
	}
}

function mark() {
	if (whichImg != numberOfPhoto+1) {
		var currentClass = ".mark-img" + whichImg;
	} else {
		var currentClass = ".mark-img1";
	}
	$(".Cgraverobber-slide-dot div").css("opacity", "0.5");
	$(currentClass).css("opacity", "1");
}